<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-07-20 13:27:44
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-07-20 13:28:01
 * @FilePath: \app\src\views\el\css\components\aspectRatio.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="box">
      <div class="item" contenteditable="true"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.box {
  .item {
    display: inline-block;
    max-width: 500px;
    min-width: 100px;
    flex: 1;
    border: 1px solid red;
    aspect-ratio: 1/1;
  }
}
</style>